{% extends "layout.html" %}

{% block left %}
<div class="col-sm-3 col-md-2 sidebar">
    <ul class="nav nav-sidebar">
        <li><a href="/">OverView</a></li>
        <li><a href="/worldcloud">WordCloud</a></li>
        <li><a href="/realtime">RealTime</a></li>
        <li><a href="/contrast">Contrast</a></li>
        <li class="active"><a href="/multiy">MultiY</a></li>
        <li><a href="/sharedataset">ShareDataset</a></li>
    </ul>
</div>
{% endblock %}

{% block right %}
<!--右边展示-->
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
    <div class="row">
        <h1 class="page-header">数据趋势图</h1>
        <form action="http://localhost:5000/uploader" method="POST" enctype="multipart/form-data">
            <input type="file" name="file"  />
            <input type="submit" value="提交" />
        </form>
    </div>

    <div class="row placeholders">
        <!--展示区-->
        <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
        <div class="col-xs-12 col-sm-8 col-lg-10 placeholder" style="height:500px;" id="main">

        </div>

    </div>
</div>
{% endblock %}

{% block echarts_js %}

<script type="text/javascript" >
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option;

    const colors = ['#5470C6', '#91CC75', '#EE6666'];
    option = {
        color: colors,
        tooltip: {
            trigger: 'axis',
            axisPointer: {
            type: 'cross'
            }
        },
        grid: {
            right: '20%'
        },
        toolbox: {
            feature: {
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true }
            }
        },
        legend: {
            data: ['Evaporation', 'Precipitation', 'Temperature']
        },
        xAxis: [
            {
            type: 'category',
            axisTick: {
                alignWithLabel: true
            },
            // prettier-ignore
            data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            }
        ],
        yAxis: [
            {
            type: 'value',
            name: 'Evaporation',
            position: 'right',
            alignTicks: true,
            axisLine: {
                show: true,
                lineStyle: {
                color: colors[0]
                }
            },
            axisLabel: {
                formatter: '{value} ml'
            }
            },
            {
            type: 'value',
            name: 'Precipitation',
            position: 'right',
            alignTicks: true,
            offset: 80,
            axisLine: {
                show: true,
                lineStyle: {
                color: colors[1]
                }
            },
            axisLabel: {
                formatter: '{value} ml'
            }
            },
            {
            type: 'value',
            name: '温度',
            position: 'left',
            alignTicks: true,
            axisLine: {
                show: true,
                lineStyle: {
                color: colors[2]
                }
            },
            axisLabel: {
                formatter: '{value} °C'
            }
            }
        ],
        series: [
            {
            name: 'Evaporation',
            type: 'bar',
            data: [
                2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
            ]
            },
            {
            name: 'Precipitation',
            type: 'bar',
            yAxisIndex: 1,
            data: [
                2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
            ]
            },
            {
            name: 'Temperature',
            type: 'line',
            yAxisIndex: 2,
            data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
            }
        ]
    };
    option && myChart.setOption(option);
</script>
{% endblock %}